import React from "react";
import { connect } from "react-redux";

import { ACTION_ADD, ACTION_PINGFANG } from '../actions/actions.js'


// 函数组件,(函数组件指定属性和方法时不用this,而类组件指定属性与方法时一般要用this)
const Contain = (props) => {
  const { num, des, add, del, pingfang } = props;  // 对象解构props对象
  return (
    <div className="Example" id="my-element">
      <p style={{ color: "ForestGreen", fontSize: 22 }}>{des}</p>
      {/* 非结构写法,要加props.
      <p style={{ color: "blue" }}>{props.num}</p> */}
      {/* 解构写法 ,省略props*/}
      <p style={{ color: "blue", fontSize: 22 }}>{num}</p>
      <div
        className="greeting"
        style={{ background: "LightPink", color: "white" }}
        onClick={add}
      >
        Hello World,点击一次,state+2
      </div>
      <br></br>
      <div
        className="greeting"
        style={{ background: "LightSkyBlue", color: "white" }}
        onClick={del}
      >
        Hello World,点击一次,state-2
      </div>
      <br></br>
      <div
        className="greeting"
        style={{ background: "LightGreen", color: "white" }}
        onClick={pingfang}
      >
        Hello World,点击一次,state的平方
      </div>
    </div>
  );
}

const mapStateToProps = (state) => {
  return {
    num: state.reducerMath.num,
    des: state.reducerMath.des
  }
}
const mapDispatchToProps = (dispatch) => {
  return {
    add: () => { dispatch(ACTION_ADD(2)); console.log('+2') },
    del: () => { dispatch(ACTION_ADD(-2)); console.log('-2') },
    pingfang: () => dispatch(ACTION_PINGFANG)
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Contain);